javascript prototype

时间：

js创建对象

最简单的对象

1
2
var obj={};
var obj2=new Object();

稍微复杂点的对象

写法一 : 定义完成后再添加属性和方法

1
2
3
4
5
6
var obj={};
obj.a=2;
obj.fn=function(){
    alert(this);
}
console.log(obj)

写法二 ： 字面量赋值

1
2
3
4
5
6
7
var obj={
    a:2;
    fn:function(){
        alert(this);
    }
};
console.log(obj);

问题：对象如果要复用的时候怎么办？有没有类？

javascript 没有类，没有类，没有类！只有对象！

function 模拟一个类

1
2
3
4
5
6
7
8
9
10
function createObj(a,fn){
                var obj={};
                obj.a=a;
                obj.fn=fn;
                return obj;
            }

            var obj=createObj(2,function(){
                alert(this.a);
            });

足够了么？还有没有问题？

上面的这个function的返回的对象是什么？怎么判断创建出来的对象的类型？

function 的特殊性

１. function可以接受参数，可以根据参数来创建相同类型不同值的对象

２. function作为构造函数（通过new操作符调用）的时候会返回一个对象，构造函数的返回值分为两种情况，当function没有return语句或者return回一个基本类型（bool,int,string,undefined,null）的时候，返回新创建的一个匿名对象，该对象即为函数实例；如果function体内return一个引用类型对象（Array,Function,Object等）时，该对象会覆盖new创建的匿名对象作为返回值。

３. 那么使用function怎么解决类型识别问题呢，每个function实例对象都会有一个constructor属性（也不是“有”，而是可以对应），这个属性就可以指示其构造是谁，也可以使用instanceof 操作符来做判断对象是否为XXX的实例。

1
2
3
4
5
6
7
8
9
function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            console.log(person1.constructor==Person);
            console.log(person1 instanceof Person);

再好一点的写法

1
2
3
4
5
6
7
8
9
function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);

问题：fn

终极写法

1
2
3
4
5
6
7
8
9
10
function Person(name){
                this.name=name;
            }
            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);

属性访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- <script type="text/javascript">
    var myObj={
        a:2
    }
    console.log(myObj.a);
    console.log(myObj.b);
</script> -->
<!-- <script type="text/javascript">
    var myObj={
        a:undefined
    }
    console.log(myObj.a);
    console.log(myObj.b);
</script> -->
<script type="text/javascript">
    var myObj = {
        get a() {
            return this.h;
        },
        set a(val){
            this.h=val*2;
        }
    }
    Object.defineProperty(myObj, "b", {
        get: function() {
            return 3;
            //enumerable: true
        }
    });
    myObj.a=2;
    console.log(myObj.a);
    console.log(myObj.b);

    myObj.hasOwnProperty("a");

</script>

hasOwnProperty 只会检查属性是否在对象中
in 在prototype说~

prototype

what

javascript 中的对象有一个特殊的属性：prototype，表示对于其他对象的引用

1
2
3
4
5
var oneObj={
    a:2
}
var twoObj=Object.create(oneObj);
console.log(twoObj.a);

尽头

Object.prototype

属性的设置与屏蔽

1
2
3
4
var oneObj={
    a:2
}
oneObj.b='b';

原则：

  1. 链上存在普通访问的属性，并没有只读，那么会在当前对象添加b
  2. 链上存在该属性，但被标记为只读，严格模式下会报错，普通模式没有执行
  3. 链上有属性，并且有setter，会被执行，不会屏蔽
javacript
javacript, prototype